<template>
	<view class="cu-custom" :style="[{height:CustomBar + 'px'}]">
		<view class="cu-bar fixed" :style="style" :class="[bgImage!=''?'none-bg text-white bg-img':'',bgColor]">
			<view class="action" @tap="BackPage" v-if="isBack">
				<text class="cuIcon-back"></text>
				<slot name="backText"></slot>
			</view>
			<view class="content" :style="[{top:StatusBar + 'px'}]">
				<slot name="content"></slot>
			</view>
			<slot name="right"></slot>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		defineProps
	} from 'vue'
	let StatusBar = ref(getApp().globalData.StatusBar)
	let CustomBar = ref(getApp().globalData.CustomBar)
	let style = ref('')
	onMounted(() => {
		style.value = `height:${CustomBar.value}px;padding-top:${StatusBar.value}px;`;
		if (props.bgImage) {
			style.value = `${style.value}background-image:url(${props.bgImage});`;
		}
	})
	let props = defineProps({
		bgColor: {
			type: String,
			default: ''
		},
		isBack: {
			type: [Boolean, String],
			default: false
		},
		bgImage: {
			type: String,
			default: ''
		},
	})
	let BackPage = () => {
		if (getCurrentPages().length < 2 && 'undefined' !== typeof __wxConfig) {
			let url = '/' + __wxConfig.pages[0]
			return uni.redirectTo({
				url
			})
		}
		uni.navigateBack({
			delta: 1
		});
	}
</script>

<style>
</style>